<template>
<div>
	{{ person.name }} ,{{ person.age }} 岁，虚岁：{{thridAge.age}}就读于 {{ person.shchool.name }}
	<button @click="changeSchool"> 变更大学</button>
	<button @click="changeAge"> 年龄变更</button>
	<button @click="changeXsAge"> 虚岁年龄变更</button>
	<button @click="changePerson"> 逆转人生</button>
	
	
	<br>
	同名不同人
	<br>
	{{ fzPerson.name }},{{ fzPerson.age }} 岁， 就读于 {{ fzPerson.shchool.name }}
	<button @click="changeFzSchool"> 变更大学</button>
	<button @click="changeFzAge"> 年龄变更</button>
	<button @click="changeFzPerson"> 逆转人生</button>

	<br>
	MarkRaw 
	<br>
	{{ fzPerson2.name }},{{ fzPerson2.age }} 岁
	<button @click="changeMarkFzAge"> markRaw 年龄变更</button>

</div>

</template>

<script lang="ts" setup name="App">

import {ref ,shallowRef,reactive,shallowReactive,readonly,toRaw,shallowReadonly,markRaw} from 'vue'

let person = ref({
	name:'jack',
	age:18,
	shchool:{
		name:'北京大学',
		address:'北京'
	}
})

function changeAge(){
	person.value.age+=1;
}

//readOnly 修饰的值无法变更
function changeXsAge(){
	thridAge.age+=1;
}

function changeSchool(){
	person.value.shchool.name ='清华大学'
}

let fzPerson = shallowRef(person)

function changeFzSchool(){
	fzPerson.value.shchool.name ='清华大学'
}

function changeFzAge(){
	fzPerson.value.age+=1;
}

function changePerson(){
	person.value = {
	name:'小列',
	age:33,
	shchool:{
		name:'北京联合大学',
		address:'北京'
	}
}
}
function changeFzPerson(){
	person.value = {
	name:'小列',
	age:33,
	shchool:{
		name:'北京联合大学',
		address:'北京'
	}
}
	
}
let thridAge =  readonly(person)

let daiMark = markRaw({
	name:'小谢',
	age:119
})






//要将一些属性交出去的时候 使用 toRaw 可以让交出去的不是响应式的 
//markRaw 可以让一个对象变成不可变的
let fzPerson2 = reactive(daiMark)

function changeMarkFzAge(){
	fzPerson2.age+=100
}



</script>

<style>
.wraper .title {
  padding: 20px;
  text-align: center;
  min-width: 610px;
}
.wraper .small{
  font-size: 15px;
}
.wraper .list-group-item {
  min-width: 230px;
}
</style>